<script setup lang="ts">
import { computed } from 'vue';
defineOptions({ name: 'BaseProcess' })
interface Props{
  percent: number
  showNumber?:boolean
}

const props = withDefaults(defineProps<Props>(),{
  showNumber:true
})



const processWidth = computed(() => `${Math.min(props.percent, 100)}%`)
</script>

<template>
  <div class="process-wrapper">
    <div class="process-inner-bg relative h-3 w-full text-center">
      <div class="process-color absolute left-0 top-0 h-full rounded-[20px]" :style="{ width: processWidth }" />
      <span v-if="showNumber" class="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 text-xs font-medium text-white">
        {{ Math.round(percent) }}%
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.process-wrapper {
  .process-inner-bg {
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border-radius: 20px;
    position: relative;
  }

  .process-color {
    background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
  }
  .process-left {
    background: linear-gradient(90deg, #21A8F7 0%, #21F3F7 100%);
  }
  .process-right {
    background: linear-gradient(95deg, #FF4810 0%, #FF9500 100%);
  }
}
</style>
